<template>
  <!-- CooperationDetails 合作详情 -->
  <view class="container">
    <Header title="合作详情" :is-go-back="true" :is-box-shadow="false" />

    <CoopStep :logo="details.apOrgLogo" :name="details.apOrgName" :ap-status="details.apStatus" />
    <ApplyInfo :info="details" />
    <CoopInfo v-if="details.projectType !== CooperationProjectTypeEnum.ACTIVITY" :info="details" />

    <TButtonGroup v-if="getStep.confirmText" :styles="{ backgroundColor: '#FFFFFF' }">
      <template #header>
        <view class="slotBox" @click.stop="callPhone">
          <view>
            <text class="ali-icon fz-20">&#xe68b;</text>
          </view>
          <view class="fz-12">联系秘书处</view>
        </view>
      </template>
      <TButton
        v-if="getStep.cancelText"
        class="gutter-btn"
        :text="getStep.cancelText"
        type="none"
        custom-class="coopClose"
        @click="getStep.cancelFnc"
      />
      <TButton
        class="gutter-btn"
        :text="getStep.confirmText"
        type="primary"
        @click="getStep.confirmFnc"
      />
    </TButtonGroup>

    <ShowModal
      v-model="confirmVisible"
      :title="'确认' + (params.apStatus === AuditStatusEnum.REJECT ? '驳回' : '合作')"
      @confirm="confirmAp"
    >
      <template #content>
        <view
          class="ma-15 px-15 py-7"
          style="width: 100%; background: #f5f5f5; border-radius: 10rpx"
        >
          <UniEasyinput
            type="textarea"
            :inputBorder="false"
            placeholder="（非必填）请输入审核原因"
            v-model="params.apText"
          />
        </view>
      </template>
    </ShowModal>
    <ShowModal
      v-model="closeVisible"
      :content="'确认' + getStep.confirmText + '?'"
      @confirm="closeCooperation"
    ></ShowModal>
  </view>
</template>

<script lang="ts" setup>
  /**  CooperationDetails  合作详情 */
  import Header from '@/components/Header/index.vue';
  import CoopStep from './components/coopStep.vue';
  import ApplyInfo from './components/applyInfo.vue';
  import CoopInfo from './components/coopInfo.vue';
  import { ref, unref, computed } from 'vue';
  import { onLoad, redirectTo } from '@/router';
  import ShowModal from '@/components/ShowModal/index.vue';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';

  import { getCooperationDetails, cancelCooperation, apCooperation } from '@/api/cooperation';
  import type { DetailsInfo } from '@/api/cooperation/types';
  import {
    AuditStatusEnum,
    ApplyTypeEnum,
    CooperationProjectTypeEnum,
  } from '@/enums/cooperationEnum';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';

  const params = ref({
    id: 0,
    apStatus: 1,
    apText: '',
  });
  const details = ref({
    projectType: CooperationProjectTypeEnum.FRIEND,
    applyType: 1,
    apStatus: 1,
  } as DetailsInfo);
  function getData() {
    getCooperationDetails(unref(params).id).then((res) => {
      details.value = res;
    });
  }

  onLoad<'CooperationDetails'>(async (op) => {
    params.value.id = op.id;
    getData();
  });

  const confirmVisible = ref(false);
  const closeVisible = ref(false);
  interface BtnSet {
    confirmText: string;
    cancelText?: string;
    confirmFnc: () => void;
    cancelFnc?: () => void;
  }
  const step = new Map<AuditStatusEnum, () => BtnSet>([
    [
      AuditStatusEnum.UNREVIEWED,
      () => {
        if (details.value.applyType === ApplyTypeEnum.AUDIT) {
          return {
            confirmText: '同意合作',
            confirmFnc: () => {
              params.value.apStatus = 3;
              confirmVisible.value = true;
            },
            cancelText: '驳回',
            cancelFnc: () => {
              params.value.apStatus = 4;
              confirmVisible.value = true;
            },
          };
        } else {
          return {
            confirmText: '取消合作申请',
            confirmFnc: () => {
              closeVisible.value = true;
            },
          };
        }
      },
    ],
    [
      AuditStatusEnum.CLOSE,
      () => {
        if (details.value.applyType === ApplyTypeEnum.AUDIT) {
          return {
            confirmText: '',
            confirmFnc: () => {},
          };
        } else {
          return {
            confirmText: '重新申请合作',
            confirmFnc: () => {
              uni.setStorageSync('_CLICK_INFO', details.value);
              redirectTo({ name: 'applyCooperation' });
            },
          };
        }
      },
    ],
    [
      AuditStatusEnum.PASSED,
      () => {
        return {
          confirmText: '取消合作',
          confirmFnc: () => {
            closeVisible.value = true;
          },
        };
      },
    ],
    [
      AuditStatusEnum.REJECT,
      () => {
        if (details.value.applyType === ApplyTypeEnum.AUDIT) {
          return {
            confirmText: '',
            confirmFnc: () => {},
          };
        } else {
          return {
            confirmText: '重新申请合作',
            confirmFnc: () => {
              uni.setStorageSync('_CLICK_INFO', details.value);
              redirectTo({ name: 'applyCooperation' });
            },
          };
        }
      },
    ],
  ]);
  const getStep = computed(() => {
    return step.get(details.value.apStatus)?.() as BtnSet;
  });

  // 确认审核
  const confirmAp = function () {
    apCooperation(unref(params)).then(() => {
      upData();
    });
  };

  // 取消合作 | 取消申请
  const closeCooperation = function () {
    cancelCooperation(unref(details).id).then(() => {
      upData();
    });
  };

  // 更新页面 以及 外部列表
  const upData = function () {
    getData();
  };

  // 联系秘书处
  const callPhone = function () {
    details.value?.contactsPhone
      ? uni.makePhoneCall({ phoneNumber: details.value.contactsPhone })
      : uni.showToast({
          title: '暂无联系方式',
          icon: 'none',
        });
  };
</script>

<style lang="scss" scoped>
  .slotBox {
    width: 266rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
</style>
